@new-green: #5db350;
@rpx: 1/75rem;
.ell() {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.bg-full() {
  background-position: center center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.abs-full() {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.display-center() {
  display: flex;
  align-items: center;
  justify-content: center;
}

.gift-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background-color: rgba(0, 0, 0, .5);
  .display-center();
  .mask-inner {
    width: 600px;
    background-color: #fff;
    border-radius: 10px;
    height: 80%;
    padding: 20px 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    .mask-close {
      position: absolute;
      top: 20px;
      right: 20px;
      width: 25px;
      height: 25px;
      cursor: pointer;
      z-index: 1;
    }
    .mask-title {
      font-size: 24px;
      color: @new-green;
      font-weight: bold;
      text-align: center;
      border-bottom: 1px solid #edeef0;
      margin: 0 40px;
      padding-bottom: 20px;
      position: relative;
      z-index: 0;
    }
    .mask-content {
      width: 520px;
      margin: 0 auto;
      flex: 1;
      display: flex;
      flex-direction: column;
      min-height: 0;
      position: relative;
      z-index: 0;
      .scroll-wrap {
        padding: 0 20px;
        margin: 0 -20px;
        display: flex;
        flex: 1;
        flex-direction: column;
        overflow-x: hidden;
        overflow-y: auto;
        .cover-wrap {
          .cover-title {
            margin-top: 20px;
            color: #333;
            font-size: 16px;
          }
          .cover-content {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            .cover-item {
              position: relative;
              width: 48%;
              height: 520 * .48 * 97 / 200px;
              cursor: pointer;
              margin-top: 15px;
              .bg-full();
              .cover-select {
                border: 1px solid #fff;
                border-radius: 50%;
                width: 20px;
                height: 20px;
                position: absolute;
                top: 15px;
                right: 15px;
                .bg-full();
                background-image: url(../images/gift_item_right_icon.png);
                &.select {
                  background-image: url(../images/gift_item_right_active_icon.png);
                }
              }
              &:nth-child(2n) {
                margin-left: 4%;
              }
            }
          }
        }
        .select-item {
          display: flex;
          flex-direction: row;
          align-items: center;
          font-size: 16px;
          color: #333;
          margin-top: 20px;
          cursor: pointer;
          .select-title {

          }
          .select-value {

          }
          .select-icon {
            height: 15px;
            margin-left: 10px;
          }
        }
        .gift-list-title {
          margin-top: 20px;
          color: #333;
          font-size: 16px;
          .tip {
            font-size: 14px;
          }
        }
        .gift-list-out {
          margin-top: 20px;
          //flex: 1;
          //overflow-x: hidden;
          //overflow-y: auto;
          .gift-list {
            display: flex;
            flex-direction: column;
            .gift-list-item {
              display: flex;
              flex-direction: row;
              align-items: center;
              min-width: 0;
              height: 80px;
              margin-top: 20px;
              &:nth-child(1) {
                margin-top: 0;
              }
              .item-head {
                width: 80px;
                height: 80px;
                border-radius: 8px;
                margin-right: 20px;
                .bg-full();
                background-size: contain;
              }
              .item-right {
                width: 60px;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                .select-icon {
                  width: 25px;
                  height: 25px;
                  border: 1px solid @new-green;
                  border-radius: 50%;
                  box-sizing: border-box;
                  cursor: pointer;
                }
                &.select {
                  .select-icon {
                    border: none;
                    .bg-full();
                    background-image: url(../images/gift_item_right_active_icon.png);
                  }
                }
              }
              .item-mid {
                display: flex;
                flex: 1;
                height: 100%;
                flex-direction: column;
                padding: 10px 0;
                .item-title {
                  color: #333;
                  font-size: 16px;
                  font-weight: 500;
                  line-height: 20px;

                }
                .item-actions {
                  display: flex;
                  flex-direction: row;
                  align-items: center;
                  .one-action {
                    width: 20px;
                    height: 20px;
                    border-radius: 50%;
                    border: 1px solid #333;
                    font-size: 22px;
                    color: #333;
                    .display-center();
                    &.disable {
                      opacity: .5;
                    }
                  }
                  .action-value {
                    color: #333;
                    margin: 0 20px;
                  }
                }
              }
            }
          }
        }
      }

      .submit-gift-btn {
        width: 100%;
        height: 60px;
        .display-center();
        background-color: @new-green;
        color: #fff;
        font-size: 16px;
        border-radius: 50vh;
        margin-top: 20px;
      }
      .rule-con {
        margin-top: 20px;
        color: #999;
        text-align: center;
        .title {
          display: inline-block;
          font-size: 14px;
          position: relative;
          &:before {
            content: '';
            position: absolute;
            left: -50px;
            width: 30px;
            height: 1px;
            top: 50%;
            background-color: #999;
          }
          &:after {
            content: '';
            position: absolute;
            right: -50px;
            width: 30px;
            height: 1px;
            top: 50%;
            background-color: #999;
          }
        }
        .tip {
          font-size: 13px;
          margin-top: 10px;
        }
      }
    }
    .mask-result-out {
      flex: 1;
      overflow-x: hidden;
      overflow-y: auto;
      margin: 0 -40px;
      padding: 0 40px;
    }
    .mask-result {
      width: 520px;
      .winner-module {
        padding: 30px 0;
        border-bottom: 1px solid #edeef0;
        &.no-border {
          border-bottom: none;
        }
        .module-title {
          color: #333;
          font-size: 16px;
          span {
            font-size: 14px;
          }
        }
        .module-list {
          .winner-item {
            display: flex;
            flex-direction: row;
            min-width: 0;
            margin-top: 20px;
            .winner-head {
              width: 45px;
              height: 45px;
              .bg-full();
              border-radius: 50%;
              position: relative;
              .winner-flag {
                width: 15px;
                height: auto;
                position: absolute;
                bottom: 0;
                right: -3px;
              }
            }
            .winner-name {
              align-self: flex-end;
              color: #333;
              font-size: 14px;
              flex: 1;
              .ell();
              margin: 0 10px 10px 10px;
            }
            .gift-name {
              color: #333;
              font-size: 14px;
              align-self: flex-end;
              margin-bottom: 10px;
            }
          }
        }
        .user-module-list {
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          .user-item {
            width: 50px;
            margin-left: 17px;
            margin-top: 15px;
            &:nth-child(8n+1) {
              margin-left: 0;
            }
            .user-head {
              width: 50px;
              height: 50px;
              border-radius: 50%;
              .bg-full();
            }
            .user-name {
              .ell();
              margin-top: 10px;
              color: #9a9a9a;
              font-size: 12px;
              text-align: center;
            }
          }
        }
        .no-list {
          width: 100%;
          color: #333;
          font-size: 18px;
          text-align: center;
          margin-top: 20px;
          .bg-full();
        }
      }
    }
    .mask-error {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      .error-tip {
        color: #666;
        margin: 0;
        line-height: 1;
      }
      .error-btn {
        //padding: 5px 10px;
        //border: 1px solid @new-green;
        //border-radius: 4px;
        //margin-top: 10px;
        color: @new-green;
        text-decoration: underline;
        margin-top: 10px;
        cursor: pointer;
      }
    }

    .mask-loading {
      flex: 1;
      .display-center();
      .loading-icon {
        width: 25px;
        height: 25px;
      }
    }

    .select-other-mask {
      background-color: rgba(0, 0, 0, .5);
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      .select-inner {
        padding: 30px 0;
        background-color: #fff;
        width: 400px;
        min-height: 0;
        position: relative;
        .close-icon {
          width: 25px;
          height: 25px;
          position: absolute;
          cursor: pointer;
          right: 20px;
          top: 20px;
        }
        .select-title {
          color: @new-green;
          font-size: 20px;
          font-weight: 500;
          margin-bottom: 20px;
          text-align: center;
        }
        .select-list {
          overflow-x: hidden;
          overflow-y: auto;
          max-height: 400px;
          .list-item {
            padding: 0 30px;
            height: 50px;
            display: flex;
            flex-direction: row;
            color: #333;
            font-size: 16px;
            align-items: center;
            .item-left {

            }
            .item-right {
              .select-icon {
                width: 25px;
                height: 25px;
                border: 1px solid @new-green;
                border-radius: 50%;
                box-sizing: border-box;
                cursor: pointer;
              }
              &.select {
                .select-icon {
                  border: none;
                  .bg-full();
                  background-image: url(../images/gift_item_right_active_icon.png);
                }
              }
            }
          }
        }
      }
    }

    .submit-loading {
      position: absolute;
      z-index: 100;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, .5);
      display: flex;
      align-items: center;
      justify-content: center;
      .inner {
        background-color: #fff;
        width: 100px;
        height: 100px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        .loading-icon {
          width: 25px;
          height: 25px;
          margin-bottom: 15px;
        }
        .loading-text {
          color: #333;
          font-size: 16px;
        }
      }

    }

  }
  &.mobile {
    .mask-inner {
      max-height: 70%;
      width: 100%;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      .mask-close {
        width: 50*@rpx;
        height: 50*@rpx;
      }
      .mask-title {
        margin: 0 40*@rpx;
        font-size: 48*@rpx;
      }
      .mask-result-out {
        margin: 0;
        padding: 0 40*@rpx;

      }
      .mask-result {
        width: 100%;
        .winner-module {
          .module-title {
            font-size: 28*@rpx;
            span {
              font-size: 20*@rpx;
            }
          }
          .user-module-list {
            @item-size: (750 - 80 - 15 * 5 - 1) / 6*@rpx;
            .user-item {
              //width: ;
              margin-left: 15*@rpx;
              width: @item-size;
              .user-head {
                width: @item-size;
                height: @item-size;
              }
              &:nth-child(6n + 1) {
                margin-left: 0;
              }
            }
          }
        }
      }
    }
  }
}

.gift-progress-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background-color: rgba(0, 0, 0, .5);
  .display-center();

  .mask-inner {
    width: 500px;
    .gift_title {
      height: 80px;
      width: 100%;
      position: relative;
      .bg-full();
      background-image: url(../images/gift_mask_title_bg.png);
      color: #fff;
      font-size: 24px;
      font-weight: bold;
      .display-center();
      .close-icon {
        display: block;
        position: absolute;
        width: 20px;
        height: 20px;
        right: 30px;
        top: 50%;
        .bg-full();
        transform: translateY(-50%);
        background-image: url(../images/gift_mask_title_close_icon.png);
        cursor: pointer;
      }
    }
    .gift-content {
      background-color: #fff;
      padding: 40px 32px 60px 32px;
      .pro-content {
        .time-down-con {
          height: 100px;
          .flipTimer {
            text-align: center;
          }
        }
        .prize-list {
          margin-top: 20px;
          display: flex;
          flex-direction: row;
          height: 130px;
          width: 100%;
          align-items: center;
          justify-content: center;
          .prize-item {
            height: 130px;
            width: 30%;
            margin-left: 5%;
            border-radius: 10px;
            .bg-full();
            background-size: cover;
            &:nth-child(1) {
              margin-left: 0;
            }
          }
        }

        .join-user {
          margin-top: 30px;
          font-size: 18px;
          text-align: center;
          span {
            color: @new-green;
            font-size: 22px;
            font-weight: bold;
          }
        }
        .join-btn {
          cursor: pointer;
          padding: 0 30px;
          height: 50px;
          background-color: @new-green;
          border-radius: 50vh;
          .display-center();
          color: #fff;
          font-size: 20px;
          margin: 20px auto 0;
        }
      }
      .wait-result {
        .display-center();
        flex-direction: column;
        .wait-icon {
          width: 62px;
          height: 51px;
          margin-bottom: 15px;
        }
        .wait-text {
          color: #999;
          font-size: 20px;
        }
      }
    }
  }

  &.mobile {
    .mask-inner {
      width: 560*@rpx;
      .gift_title {
        height: 134*@rpx;
        font-size: 48*@rpx;
        .close-icon {
          width: 30*@rpx;
          height: 30*@rpx;
          right: 32*@rpx;
          cursor: pointer;
        }
      }
      .gift-content {
        padding: 40*@rpx 32*@rpx 60*@rpx 32*@rpx;
        .pro-content {
          .time-down-con {
            height: 100*@rpx;
            .flipTimer {
              font-size: 120*@rpx;
              height: 120*@rpx;
              line-height: 120*@rpx;
            }
            .flipTimer .digit-set, .flipTimer .digit > div.shadow-top, .flipTimer .digit > div.shadow-bottom {
              width: 90*@rpx;
            }
            .flipTimer .seperator {
              width: 30*@rpx;
              margin: 0 20*@rpx;
              &:after {
                width: 20*@rpx;
                height: 20*@rpx;
                bottom: 25*@rpx;
                left: 15*@rpx;
              }
              &:before {
                width: 20*@rpx;
                height: 20*@rpx;
                top: 35*@rpx;
                left: 15*@rpx;
              }
            }
          }
          .prize-list {
            height: 160*@rpx;
            .prize-item {
              height: 160*@rpx;
            }
          }

          .join-btn {
            height: 100*@rpx;
            width: 300*@rpx;
            font-size: 36*@rpx;
            cursor: pointer;
          }

          .join-user {
            font-size: 36*@rpx;
            span {
              font-size: 48*@rpx;
            }
          }
        }
        .wait-result {
          .wait-icon {
            width: 124*@rpx;
            height: 102*@rpx;
            margin-bottom: 30*@rpx
          }
          .wait-text {
            font-size: 48*@rpx;
          }
        }
      }
    }
  }
}

